<template>
  <div class="login-container">
    <!-- 左侧宣传区域 -->
    <div class="login-banner">
      <h2>智慧校园图书管理系统</h2>
      <p>便捷、高效、智能的图书管理解决方案</p>
      <img src="@/assets/library.jpg" alt="图书馆" />
    </div>

    <!-- 右侧登录区域 -->
    <div class="login-form">
      <div class="form-container">
        <h1>后台管理</h1>
        <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名"
            >
            </el-input>
          </el-form-item>
          <el-form-item prop="userpass">
            <el-input
              v-model="loginForm.userpass"
              prefix-icon="el-icon-lock"
              type="password"
              placeholder="请输入密码"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleLogin"
              :loading="loading"
              class="login-btn"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
        <div class="student-entry">
          <router-link to="/userborrow" class="student-link">
            学生借阅入口 →
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex';
import { adminLogin } from "@/api/index"; // 假设你有一个登录的 API 接口
import { ElMessage } from 'element-plus';

const router = useRouter();
const store = useStore();
const loading = ref(false);
const loginFormRef = ref();

const loginForm = ref({
  username: "",
  userpass: "",
});

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" },
  ],
  userpass: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
  ],
};

const handleLogin = async () => {
  if (!loginFormRef.value) return;

// console.log(loginForm.value)
  let res = await adminLogin(loginForm.value);
  //console.log(res);
  try {
    if (res.code == 200) {
      //登录成功
      ElMessage({
        message: res.msg,
        type: "success",
      });
      store.commit("loginToken", res.data.token);
      store.commit("LoginUser", JSON.stringify(res.data.user));
      router.push("./"); // 假设你有一个命名路由 'Home'
    } else {
      // 登录失败
      ElMessage.error(res.msg);
    }
  } catch (error) {
    // 处理请求错误
    ElMessage.error("登录请求失败" + error);
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: #f8f9fa;
}

.login-banner {
  flex: 1;
  background: linear-gradient(135deg, #e4d5c0 0%, #e5cfc1 100%);
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.login-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(228, 213, 192, 0.3) 0%, rgba(29, 57, 196, 0.3) 100%);
  z-index: 1;
}

.login-banner h2 {
  font-size: 2.8em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.login-banner p {
  font-size: 1.3em;
  margin-bottom: 40px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.login-banner img {
  max-width: 75%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

.login-banner img:hover {
  transform: scale(1.02);
}

.login-form {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.95);
}

.form-container {
  width: 400px;
  padding: 45px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.form-container:hover {
  transform: translateY(-5px);
}

.form-container h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #2c3e50;
  font-weight: 600;
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-input) {
  margin-bottom: 24px;
}

:deep(.el-input__inner) {
  height: 44px;
  border-radius: 8px;
}

:deep(.el-input__inner:focus) {
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.student-entry {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.student-link {
  color: #409EFF;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease;
}

.student-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}
</style>
